{extend name='./_content'}
{block name='mid'}
<div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title">Echart 简单例子</h3>
    </div>
    <div class="panel-body">
        <div id="main" style="width: 100%;height:400px;"></div>
    </div>
    <div class="panel-footer">
       <script type="text/javascript">
           $(function () {
               var myChart = echarts.init(document.getElementById('main'));
               var option = {
                   title: {
                       text: '入门示例'
                   },
                   legend:{
                       data:[
                           '销售量','人气'
                       ]
                   },
                   xAxis:{
                       data:['1','2','3','4']
                   },
                   yAxis:{},
                   series:[
                       {
                           name:'销售量',
                           type:'bar',
                           data:[21,23,31,21]
                       },{
                           name:'人气',
                           type:'line',
                           data:[12,11,32,12]
                       }
                   ],
                   tooltip: {
                       trigger: 'axis'
                   }
               }
               myChart.setOption(option);
           });
       </script>
    </div>
</div>
{/block}